import { defineComponent, watch, shallowReactive, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  data: {
    type: Array,
    default: [],
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,

  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 配置项
    let options = {}

    const color = [
      "rgba(245, 232, 49, 1)",
      "rgba(61, 204, 147, 1)",
      "rgba(245, 98, 98, 1)",
      "rgba(49, 219, 245, 1)",
      "rgba(229,202,92, 1)",
      "rgba(204, 106, 20, 1)",
    ]
    watch(
      () => props.data,
      (val: any) => {
        //
        const series = []
        let yAxis = []
        for (let i = 0; i < val.length; i++) {
          series.push({
            startAngle: 270,
            name: "",
            type: "pie",
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [90 - i * (100/val.length) + "%", 84 - i * (100/val.length) + "%"],
            center: ["50%", "50%"],
            label: {
              show: false
            },
            itemStyle: {
              borderWidth: 30, //圆柱图宽度
              borderRadius: 30, //光环宽度
              borderColor: 'rgba(0, 0,0, 0)',
              borderDashOffset: (100/val.length),
            },
            data: [
              {
                value: val[i].value,
                name: val[i].name,
              },
              {
                value: 100 - val[i].value,
                name: "",
                itemStyle: {
                  color: 'transparent',
                },
                hoverAnimation: false
              }
            ]
          })
          series.push({
            name: "",
            startAngle: 270,
            type: "pie",
            silent: true,
            z: 1,
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [90 - i * (100/val.length) + "%", 84 - i * (100/val.length) + "%"],
            center: ["50%", "50%"],
            label: {
              show: false
            },
            itemStyle: {
              borderWidth: 30, //圆柱图宽度
              borderRadius: 30, //光环宽度
              borderColor: 'rgba(0, 0,0, 0)',
              borderDashOffset: (100/val.length),
            },
            data: [{
              value: 7.5,
              itemStyle: {
                color: "rgba(255, 255, 255, 0.08)",
              },
              hoverAnimation: false
            },
            {
              value: 2.5,
              itemStyle: {
                color: "rgba(255, 255, 255, 0.01)",
              },
              hoverAnimation: false
            }
            ]
          })
          yAxis.push(`${val[i].name}: ${parseFloat(val[i].count)}亩 ${parseFloat(val[i].value).toFixed(1)}%`)
        }
        yAxis = yAxis.reverse()
        options = {
          color: color,
          grid: {
            top: `${100-val.length*(val.length+2)}%`,
            left: "50%",
            width: "100%",
            height: `${val.length*(val.length+2)}%`,
            containLabel: false
          },
          yAxis: [{
            type: "category",
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                // color: "#fff",
                fontSize: 12,
              },
              show: true
            },
            data: yAxis
          }],
          xAxis: [{
            show: false,
          }],
          series: series
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options,true)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "268px"
      const width = "268px"

      return <div>
        <echart ref={chartRef} class="mr-auto" options={options} height={height} width={width} />
      </div>
    }
  }
})

